<template>
  <div>
    <yd-search  v-model="value1" :on-submit="submitHandler"></yd-search>
    <yd-infinitescroll :callback='load' ref='infinitescrollDemo'>
      <div v-for="item in list" :key="item.index" slot="list" class="div2" @click="info(item.id,item.a,item.name_info)">
      <!-- <router-link :to="{path:'recommend',query:{id:id}}"> -->
        <img :src="item.image" alt="" srcset="" class="img-style">
      <!-- </router-link> -->
        <div class="div3">
          <div style="margin-left:5px;">
            <span class="span-font-style">{{item.name}}</span>
          </div>
          <div class="inforight">
            <span>{{item.name_info}}</span>
          </div>
        </div>
      </div>
      <!-- 数据全部加载完毕显示 -->
      <span slot='doneTip'>啦啦啦，啦啦啦，没有数据啦~~</span>
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <img slot='loadingTip' src='http://static.ydcss.com/uploads/ydui/loading/loading10.svg'/>
    </yd-infinitescroll>
  </div>
</template>
<script>
export default {
  name: 'redtypelist',
  data () {
    return {
      outdata: {},
      id: '',
      a: '',
      value1: '',
      name_info: '',
      pageNo: 1,
      pageSize: 6,
      list: [],
      searchlist: []
    }
  },
  mounted: function() {
    this.name_info = this.$route.query.name_info;
    this.load();
  },
  methods: {
    submitHandler(value) {
      // this.$dialog.toast({mes: `搜索：${value}`});
      this.$router.push({path: '/livelist', query: {searchtext: value}})
    },
    load() {
      // this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
      this.hdAjax({
        url: this.API.findTwoByUseList,
        data: {
          type: 'H',
          id: this.$route.query.id,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        },
        success: (resultData) => {
          this.id = this.$route.query.id;
          const _list = resultData.data.results;
          this.list = [...this.list, ..._list];
          if (_list.length < this.pageSize) {
            /* 所有数据加载完毕 */
            console.log(999);
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
          console.log('可加载');
          /* 单次请求数据完毕 */
          this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
          this.pageNo++;
          console.log(this.pageNo);
        }
      });
    },
    info(id, a, nameinfo) {
      if (a === 0) {
        this.$router.push({path: 'livetypelist', query: {id: id}});
        location.reload();
      } else {
        this.$router.push({path: '/livelist', query: {id: id, name_info: this.name_info}})
      }
    }
  }
}
</script>
<style scope>
  .font-style{
    color:#ffffff;
    font-size:0.35rem;
  }
  .m-cell {
  background-color: #218B98;
  padding: 10px;
  margin-bottom: -10px;
}
.cell-item{
  height: 40px;
  padding: 0px;
  background-color: #fff;
  border-radius: 8px;
}
.cell-right{
  min-height: 0px;
}
  .m-cell-box{
    margin-bottom: 0rem;
  }
  .search-style{
    border-radius: 10px;
  }
  .cell-style{
    padding: 10px;
    background-color: #009393;
  }
  .div2{
    padding: 10px 30px 10px 30px;
  }
  .div3{
    border-bottom:	#ADADAD 1px solid;
    height: .9rem;
  }
  .img-style{
    height: 3.5rem;
    width: 100%;
  }
  .span-font-style{
    font-size:0.35rem;
    float: left;
  }
  .yd-input{
  width: 100%;
}
.yd-input input{
  width: 100%;
}
.inforight{
  float: right;
  text-align: center;
  margin-top: 3px;
  width: 60%;
  font-size: 12px;
  line-height: 30px;
}
.search-icon{
  width: 9%;
}
.yd-search-input>.search-input{
  border-radius: 8px;
}
.yd-search-input{
  background-color: #218B98;
  font-size: .25rem;
}
  /* ::-moz-placeholder { font-size: 18px; }
  ::-webkit-input-placeholder { font-size:18px; }
   :-ms-input-placeholder { font-size:18px; } */

</style>